import React from 'react';
import { Link } from 'react-router-dom';
import { Icon, Layout, Tabs, message, Form, Input, Button, Modal } from 'antd';

const { Header } = Layout;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

class MobileHeader extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      current: 'top',
      modalVisible: false,
      action: 'login',
      hasLogined: false,
      userNickName: '',
      userId: 0
    }
  }

  componentDidMount() {
    if (localStorage.userId !== '') {
      this.setState({
        hasLogined: true,
        userNickName: localStorage.userNickName,
        userId: localStorage.userId
      })
    }
  }

  render() {
    const { getFieldProps } = this.props.form;
    const userShow = this.state.hasLogined
      ? (
        <Link to={`/usercenter`}>
          <Icon type='inbox' className='mb__logined mb__header__setting' />
        </Link>
      )
      : (
        <Icon type='setting' className='mb__header__setting' onClick={this.handleLogin} />
      );
    return (
      <Header className='mb__header'>
        <a href="/" className='iconfont icon-xinwen'>
          <span className='mb__header__title'>ReactNews</span>
        </a>
        {userShow}
        <Modal title='用户中心' wrapClassName='vertical-center-modal' visible={this.state.modalVisible}
          onCancel={this.setModalVisible.bind(this, false)}
          onOk={this.setModalVisible.bind(this, false)}>
          <Tabs type='card' onChange={this.callback}>
            <TabPane tab='登录' key='1'>
              <Form onSubmit={this.handleSubmit}>
                <FormItem>
                  <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="请输入你的账户名" {...getFieldProps('userName')} />
                </FormItem>
                <FormItem>
                  <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder="请输入你的密码"  {...getFieldProps('password')} />
                </FormItem>
                <Button type='primary' htmlType='submit'>登录</Button>
              </Form>
            </TabPane>
            <TabPane tab='注册' key='2'>
              <Form layout='horizontal' onSubmit={this.handleSubmit}>
                <FormItem>
                  <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="请输入你的账户名" {...getFieldProps('r_username')} />
                </FormItem>
                <FormItem>
                  <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder="请输入你的密码" {...getFieldProps('r_password')} />
                </FormItem>
                <FormItem>
                  <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder="请确认你的密码" {...getFieldProps('r_confirmPassword')} />
                </FormItem>
                <Button type='primary' htmlType='submit'>注册</Button>
              </Form>
            </TabPane>
          </Tabs>
        </Modal>
      </Header>
    )
  }

  callback = (key) => {
    if (key === '1') {
      this.setState({
        action: 'login'
      })
    } else {
      this.setState({
        action: 'register'
      })
    }
  }

  logout = () => {
    localStorage.userId = '';
    localStorage.userNickName = '';
    this.setState({
      hasLogined: false
    })
  }

  handleLogin = () => {
    this.setModalVisible(true);
  }

  setModalVisible(value) {
    this.setState({
      modalVisible: value
    })
  }

  handleMenuClick(e) {
    if (e.key === 'register') {
      this.setState({
        current: 'register'
      })
      this.setModalVisible(true);
    } else {
      this.setState({
        current: e.key
      })
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    var myfetchFormOptions = {
      method: 'GET'
    };
    this.props.form.validateFields((err, formData) => {
      if (!err) {
        fetch('http://newsapi.gugujiankong.com/Handler.ashx?action=' + this.state.action
          + '&username=' + formData.userName
          + '&password=' + formData.password
          + '&r_userName=' + formData.r_username
          + '&r_password=' + formData.r_password
          + '&r_confirmPassword=' + formData.r_confirmPassword, myfetchFormOptions)
          .then(response => response.json())
          .then(json => {
            this.setState({
              userNickName: json.NickUserName,
              userId: json.UserId
            })
            localStorage.userId = json.UserId;
            localStorage.userNickName = json.NickUserName;
          })
        if (this.state.action === 'login') {
          this.setState({
            hasLogined: true
          })
        }
        message.success('登录成功');
        this.setModalVisible(false);
      }
    });
    this.props.form.resetFields();
  }
}

export default MobileHeader = Form.create()(MobileHeader)